/**
 * 将一个文件就做成一个组件，需要注意两点
 *  1. 必须在文件最开始，引入 React
 *  2. 文件最后，记得导出
 */
import React, { Component } from "react";

// 引入 prop-types ，用于处理 props 的 类型校验
import PropTypes from "prop-types";

/**
 * 类组件如何使用 props
 *    通过类的实例，又可以叫做组件实例，this
 */
class MyApp extends Component {
  // 提供一个render函数，函数里面返回 jsx
  render() {
    console.log(this);
    return (
      <div>
        <h1>我是 MyApp</h1>
        <p>姓名：{this.props.name}</p>
        <p>年龄：{this.props.age}</p>
      </div>
    );
  }
}

/**
 * 如果需要对 props 做类型的校验
 *  1. 需要安装 prop-types 模块
 *      npm install prop-types
 *
 *  2. 给组件定义 propTypes 属性，
 *    xx组件.propTypes = {
 *      key: value,
 *        key - 要限制的prop的名字
 *        value - 要限制的类型
 *    }
 *
 */
MyApp.propTypes = {
  name: PropTypes.string,
};

// prop默认值的设置
MyApp.defaultProps = {
  age: 18,
};

export default MyApp;
